<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
	"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<title>RTL Grid Bidi Test</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
	<style type="text/css">
		@import "../../resources/Grid.css";
		@import "../../resources/Grid_rtl.css";		
		body {
			font-size: 0.9em;
			font-family: Geneva, Arial, Helvetica, sans-serif;
		}
		.heading {
			font-weight: bold;
			padding-bottom: 0.25em;
		}
				
		#grid { 
			border: 1px solid #333;
			width: 43em;
			height: 30em;
		}
		
		#grid .dojoxGridRow {
			border: none;
		}
		
		#grid .dojoxGridRowTable {
			border-collapse: collapse;
		}
		
		#grid .dojoxGridCell {
			border: 1px solid #333;
			padding: 10px;
		}
		
		.selectedRow .dojoxGridCell {
			background-color: #003366;
			color: white;
		}
		
		.specialRow .dojoxGridCell {
			background-color: dimgray;
		}
		
		.selectedRow.specialRow .dojoxGridCell {
			text-decoration: line-through;
			/* duplicate selection background-color so has precendence over specialRow background-color */
			background-color: #003366;
		}
		
		/* in the yellow column, assign specific decoration for special rows that are selected */
		.selectedRow.specialRow .yellowColumnData {
			text-decoration: line-through underline;
		}		
		.yellowColumn {
			color: #006666;
		}		
		.overRow .dojoxGridCell {
			text-decoration: underline;
		}	
		.greenColumn {
			color: yellow;
			background-color: #006666;
			font-style: italic;
		}	
		.yellowColumnData {
			background-color: yellow;
			text-decoration: underline;
		}
		.redColumnData {
			color: blue;		
			background-color: pink;
			text-decoration: underline;
		}		
	</style>
	
	<script type="text/javascript" src="../../../../dojo/dojo.js" data-dojo-config = "async: true, parseOnLoad: true, has: {'dojo-bidi': true}"></script>
	
	<script type="text/javascript">		
		require([
			"dojo/ready",
			"dijit/registry",
			"doh/runner",
			"dojo/dom",
			"dojo/query",
			"dojo/data/ItemFileWriteStore",
			"dojox/grid/DataGrid",
			"dojo/parser",			
			"dojox/grid/cells/dijit"
		], function(ready, registry, runner, dom, query, ItemFileWriteStore){		
			ready(function(){
				data = {identifier: 'id',label: 'id',items: []};		
				data_list = [
					{ col1: "Hello note!", col2: "Hello note!", col3: "Hello note!", col4: 'To problems of corruption by!', col5: 9.12, col6: "Hello note!"},
					{ col1: "\u05e9\u05dc\u05d5\u05dd note!", col2: "\u05e9\u05dc\u05d5\u05dd note!", col3: "\u05e9\u05dc\u05d5\u05dd note!", col4: 'Which would simply be awkward in!', col5: 12.15, col6: "\u05e9\u05dc\u05d5\u05dd!"}
				];
				for(var i=0; i < 60; i++){
					data.items.push(dojo.mixin({ id: i }, data_list[i%2]));
				}
				test_store = new ItemFileWriteStore({data: data});		
				var structure = [
					{
						noscroll: true,
						cells: [
							{name: 'Editable LTR!', editable: true, field: 'col1', textDir: 'ltr', width: 6, headerStyles: 'padding-bottom: 2px;', styles: 'border-bottom: 1px dashed #333; border-right: 1px dashed #333; padding: 6px;'},
							{name: 'Editable RTL!', editable: true, field: 'col2', width: 6, headerStyles: 'padding-bottom: 2px;', styles: 'border-bottom: 1px dashed #333; border-right: 1px dashed #333; padding: 6px;'}
						]
					},
					[
						{name: 'Editable Auto!', editable: true, field: 'col3', cellClasses: 'redColumnData', textDir: 'auto'},
						{name: 'Editable inherit!', editable: true, field: 'col4', headerStyles: 'background-image: none; background-color: #003333;', classes: 'greenColumn'},
						{name: 'Read-only Align center!', field: 'col5', cellClasses: 'yellowColumnData', classes: 'yellowColumn', styles: 'text-align: center;' },
						{name: 'RTL Select!', cellType: dojox.grid.cells.Select, editable: true, field: 'col6', options: ["Hello note!", "\u05e9\u05dc\u05d5\u05dd note!"]}
					]
				];
				var grid = dijit.registry.byId("grid");
				grid.setStore(test_store);
				grid.set('structure', structure);

				runner.register("grid.tests.bidi.test_styling", [
					{
						name: "Grid styles, Bidi",					
						runTest: function(){
							query(" .dojoxGridCell").forEach(function(node, index, arr){
								switch(node.getAttribute("idx")){
									case "0":
										runner.is("ltr", node.style.direction, "cell node should have 'direction' style corresponding to 'textDir'");
										break;					
									case "1":
									case "3":
									case "4":
									case "5":
										runner.is("rtl", node.style.direction, "cell node should have 'direction' style corresponding to 'textDir'");
								}
							});									
						}
					}
				]);
				runner.register("log", function(){
					dom.byId('failures').innerHTML = runner._failureCount;
					dom.byId('errors').innerHTML = runner._errorCount;
				});
				runner.run();				
			});
		
		},			
		toggleGridTextDir = function(){
			var grid = dijit.registry.byId("grid");
			grid.set("textDir", (grid.get("textDir") === "rtl") ? "ltr" : "rtl");    
		} );
</script>
</head>
<body dir="rtl">
    <input id="btn" type="button" onclick="toggleGridTextDir()" value="Toggle Grid TextDir"><br>	
    <br />
	<div class="heading">RTL Grid Bidi Test</div>
	<div id="grid" data-dojo-id="grid" data-dojo-type="dojox/grid/DataGrid" data-dojo-props='textDir: "rtl" '></div>

		<br>Errors:&nbsp;<span id="errors">?</span>
		<br>Failures:&nbsp;<span id="failures">?</span>			
</body>
</html>
